<template>
  <div class="select-platform" v-if="$store.getters.platformNum > 1 || $store.getters.packetOrderNum">
    <el-radio-group class="platform-radio" v-model="currentType" size="small" @change="changeType" :disabled="disdisabled">
      <el-radio-button
        v-for="item in platformGroup"
        :key="item.label"
        :label="item.label"
      >
        {{item.name}}
        {{item.num !== null ? `(${item.num})` : ''}}
      </el-radio-button>
    </el-radio-group>

  </div>
</template>

<script>
import {
  getAliexpressName,
  getAmazonName,
  getFalabellaName,
  getMercadoName,
  getSheinName,
  getShopeeName,
  getTikTokName
} from "@/utils";

export default {
  name: "SelectPlatform",
  props: {
    platformType: {
      default: 1,
      type: Number,
    },
    numArr:{
      type: Array,
      default: function (){
        return []
      },
    },
    disdisabled: {
      type: Boolean,
      default: false,
    },
    // 是否显示小包的选项
    showPacket: {
      type: Boolean,
      default: false,
    },
  },
  watch:{
    numArr(){
      this.setNum()
    },

  },
  data(){
    return {
      platformGroup: [],
      currentType: 1,
    }
  },
  created() {
    this.currentType = this.platformType
    if(this.$store.getters.accountMKD){
      this.platformGroup.push(
        {name: getMercadoName(),label: 1,num: null,}
      )
    }
    if(this.$store.getters.accountFalabella){
      this.platformGroup.push(
        {name: getFalabellaName(),label: 2,num: null,}
      )
    }
    if(this.$store.getters.accountShopee){
      this.platformGroup.push(
        {name: getShopeeName(),label: 3,num: null,}
      )
    }
    if(this.$store.getters.accountShein){
      this.platformGroup.push(
        {name: getSheinName(),label: 4,num: null,}
      )
    }
    if(this.$store.getters.accountAmazon){
      this.platformGroup.push(
        {name: getAmazonName(),label: 5,num: null,}
      )
    }

    if(this.$store.getters.accountTikTok){
      this.platformGroup.push(
        {name: getTikTokName(),label: 6,num: null,}
      )
    }

    if (this.showPacket && this.$store.getters.packetOrderNum) {
      this.platformGroup.push(
        {name: this.$t('order.packet'),label: 7,num: null,}
      )
    }

    if(this.$store.getters.accountAliexpress){
      this.platformGroup.push(
        {name: getAliexpressName(),label: 8,num: null,}
      )
    }

    this.setNum()
  },
  methods:{
    setNum(){
      this.numArr.forEach(item=>{
        this.platformGroup.some(plat=>{
          if(plat.label === item.type){
            plat.num = item.num;
            return true;
          }
        })
      })
    },
    changeType(){
      this.$emit('input',this.currentType)
      this.$emit('change',this.currentType)
    }
  }
}
</script>


<style>
.platform-radio{
  .el-radio-button__inner{

  }
  .el-radio-button__inner:hover {
    color: #ff6d6d;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #FFFFFF;
    background-color: #ff6d6d;
    border-color: #ff6d6d;
    -webkit-box-shadow: -1px 0 0 0 #ff6d6d;
    box-shadow: -1px 0 0 0 #ff6d6d;
  }
}
</style>

<style scoped lang="scss">
.select-platform{
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f2f2f2;
}
</style>
